<template>
	<!-- 签约记录的消息页 -->
	<view class="back-color-contan">
		<!--    v-if="show(1)" -->
		<view class="right-item" v-if="show(3)">
			<!-- <view class="left-arrow">
				<image src="/static/icons/u4926.png" mode=""></image>
			</view> -->
			<view class="image-bg">
				<image src="/static/icons/u4915.png" mode=""></image>
			</view>
			<view class="payment-wait" @click="toDetailSuccess">
				<view class="doctor-item">
					<view class="top-item">{{signData[0]?.message}} </view>
					<view class="date-item">{{signData[0]?.time}}</view>
				</view>
				<view class="team-sign">签约团队：{{signData[0]?.signId?.teamId?.name}}</view>
			</view>
		</view>
		<view class="right-item" v-if="show(2)">
			<!-- <view class="arrow-item">
				<image src="/static/icons/u4926.png" mode=""></image>
			</view> -->
			<view class="image-bg">
				<image src="/static/icons/u4915.png" mode=""></image>
			</view>
			<view class="payment-wait" @click="toWaitPay" :class="{'active':userState>2}">
				<view class="doctor-item">
					<view class="top-item">{{signData[1]?.message}}</view>
					<view class="date-item">{{signData[1]?.time}}</view>
				</view>
				<view class="team-sign">签约团队：{{signData[1]?.signId?.teamId?.name}}</view>
			</view>
		</view>
		<view class="right-item" v-if="show(1)">
			<!-- <view class="right-arrow">
				<image src="/static/icons/u4919.png" mode=""></image>
			</view> -->
			<view class="succ-bg">
				<image src="/static/icons/u4922.png" mode=""></image>
			</view>
			<view class="sign-apply">
				<view class="buttom-sign">
					<view class="apply-success">{{signData[2]?.message}}</view>
					<view class="date-item">{{signData[2]?.time}}</view>
				</view>
				<view class="team-sign">签约团队：{{signData[2]?.signId?.teamId?.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getSigningRecordApi
	} from '../../api/sign';
	import {
		useUserStore
	} from '../../store/user';

	const useStore = useUserStore()
	console.log(useStore?.signId);
	// 保存用户的状态值
	const userState = ref(useStore.userInfo?.state);
	console.log(userState.value);
	// 签约数据
	const signData = ref([])
	onMounted(() => {
		// getData()
	})
	const show = (requiredState) => {
		return userState.value >= requiredState
	}
	// 根据签约id去获取签约的进度
	const getData = () => {
		getSigningRecordApi({
				_id: useStore.signId
			})
			.then(res => {
				if (res.code == 200) {
					console.log(res);
					signData.value = res.data
				}
			})
	}
	const toWaitPay = () => {
		uni.navigateTo({
			url: '/minePackage/pages/wait-pay/wait-pay'
		})
	}
	const toDetailSuccess = () => {
		uni.navigateTo({
			url: '/minePackage/pages/sign-detail/sign-detail'
		})
	}
</script>

<style scoped lang="scss">
	.active {
		background-color: #ffffff;
	}

	.back-color-contan {
		display: flex;
		margin-top: 30rpx;
		position: relative;
		flex-direction: column;
	}

	.image-bg {
		width: 60rpx;
		height: 60rpx;
		background-color: #2984f8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		margin-top: 40rpx;

		image {
			width: 32rpx;
			height: 28rpx;
		}
	}

	.arrow-item {
		position: absolute;
		left: 102rpx;
		top: 280rpx;
		transform: rotate(52deg);

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.left-arrow {
		position: absolute;
		left: 102rpx;
		top: 60rpx;
		transform: rotate(52deg);

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.right-arrow {
		position: absolute;
		left: 103rpx;
		top: 505rpx;
		transform: rotate(52deg);

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.line-image {
		width: 10rpx;
		height: 128rpx;
		margin-left: 25rpx;
		margin-top: 15rpx;
	}

	.succ-bg {
		width: 60rpx;
		height: 60rpx;
		background-color: #e4e4e4;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 40rpx;
		margin-top: 40rpx;

		image {
			width: 32rpx;
			height: 28rpx;
		}
	}

	.left-item {
		margin: 30rpx 20rpx;
	}

	.right-item {
		display: flex;
		margin-top: 10rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.payment-wait {
		width: 564rpx;
		height: 180rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		margin: 20rpx 0 10rpx;
	}

	.sign-apply {
		width: 564rpx;
		height: 174rpx;
		border-radius: 40rpx;
		background-color: #f2f2f2;
		margin-top: 30rpx;
	}

	.doctor-item {
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.date-item {
		font-size: 24rpx;
		color: #999999;
	}

	.team-sign {
		font-size: 24rpx;
		color: #999999;
		padding: 0 20rpx;
	}

	.buttom-sign {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.apply-success {
		font-size: 32rpx;
		color: #999999;
	}

	.image-san {
		image {
			position: absolute;
			left: 110rpx;
			top: 58rpx;
			width: 40rpx;
			height: 38rpx;
			transform: rotate(412deg);
		}

	}

	.image-san-san {
		image {
			position: absolute;
			left: 110rpx;
			top: 260rpx;
			width: 40rpx;
			height: 38rpx;
			transform: rotate(412deg);
		}
	}
</style>